<script setup>
import { reactive, onMounted, watch } from 'vue';
import { deviceApi } from '@T2/service/api.ts';

const props = defineProps({
	unit: {
		type: Object,
		required: true,
	},
});
watch(() => props.unit.id, (nv, ov) => {
  if (nv) {
    getSensorList();
  }
});
onMounted(() => {
  getSensorList();
});
const Resd = reactive({
  line: 0,
  dline1: [],
  dline2: [],
});
function getSensorList() {
  Resd.dline1 = [];
  Resd.dline2 = [];
  deviceApi({
    method: 'get',
    params: {
      unit: props.unit.id,
    }
  }).then(res => {
    const arrs = res?.results || [];
    Resd.line = arrs.length > 10 ? 2 : 1;
    if (Resd.line === 1) {
      Resd.dline1 = arrs;
    } else {
      res?.results.forEach((item, index) => {
        if (index % 2 === 0) {
          Resd.dline1.push(item);
        } else {
          Resd.dline2.push(item);
        }
      });
    }
  })
}
</script>



<template>
  <div class="guideLine_position">
    <img :src="require('../assets/guideLine.png')" />
    <div class="device_pop1">
      <div class="tLeft"></div>
      <div class="bLeft"></div>
      <div class="tRight"></div>
      <div class="bRight"></div>
      <div class="title_s">
        <span>{{  props.unit.name }}</span>
      </div>
      <div class="line"></div>
      <div class="datas">
        <div class="data-box">
          <div class="data" v-for="item in Resd.dline1">
            <span >{{ item.name?.replace(`${ props.unit.name }`, '') }}</span>
          </div>
        </div>
        <div class="data-box" v-if="Resd.line === 2">
          <div class="data" v-for="item in Resd.dline2">
            <span >{{ item.name?.replace(`${ props.unit.name }`, '') }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.guideLine_position {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  transform: translateY(-3px);
  img {
    width: 46px;
    height: 25px;
  }
  .device_pop1 {
    width: fit-content;
    min-width: 200px;
    height: fit-content;
    white-space: nowrap;
    background: linear-gradient( 180deg, #000000 0%, rgba(0,0,0,0.66) 100%);
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    border: 1px solid #00FED6;
    position: absolute;
    left: 46px;
    top: 25px;
    .tLeft,
    .bLeft,
    .tRight,
    .bRight {
      width: 0;
      height: 0;
      position: absolute;
      border-style: solid;
    }
    .tLeft {
      top: 0;
      left: 0;
      border-width: 4px 4px 0 0;
      border-color: #00FED6 transparent transparent transparent;
    }
    .bLeft {
      bottom: 0;
      left: 0;
      border-width: 4px 0 0 4px;
      border-color: transparent transparent transparent #00FED6;
    }
    .tRight {
      top: 0;
      right: 0;
      border-width: 0px 4px 4px 0px;
      border-color: transparent #00FED6 transparent transparent;
    }
    .bRight {
      bottom: 0;
      right: 0;
      border-width: 0px 0px 4px 4px;
      border-color: transparent transparent #00FED6 transparent;
    }
    .title_s {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: YouSheBiaoTiHei;
      font-size: 16px;
      color: #FFFFFF;
      text-shadow: 0px 2px 4px rgba(0,0,0,0.5);
      padding: 0 7px;
      img {
        width: 10px;
        height: 10px;
      }
    }
    .line {
      margin: 0 5px;
      height: 1px;
      border: 1px dotted rgba(255,255,255,0.3);
    }
    .datas {
      margin: 4px;
      height: fit-content;
      min-height: 20px;
      background-color: rgba(0,0,0,0.4);
      display: flex;
      justify-content: center;
      .data-box {
        width: fit-content;
        height: fit-content;
        display: flex;
        flex-direction: column;
        padding: 5px;
        .data {
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: #cccccc;
          margin: 2px;
        }
      }
      .data-box:nth-last-child(2) {
        align-items: flex-end;
      }
    }
  }
}
</style>

